import React, { useEffect, useState } from 'react'
import { Select, Space, Input, Button, Radio, Table, Modal, Switch, Form, message, Upload, InputNumber } from 'antd';
const { Search } = Input;
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import type { ColumnsType } from 'antd/es/table';
import '../../styles/classify.less';
import { history } from 'umi';
import { getAll, getDelete, getOne,getCategory } from "@/apis/goodsCategory";
import type { RadioChangeEvent, SelectProps } from 'antd';
import AddClassify from './addClassify';
import UpdaClassify from './updaClassify';

interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
    description: string;
}

type Props = {}

const gotoDel = async (_id: any) => {
    console.log("12333", _id);
    const res = await getDelete({ _id });
    console.log("res", res)
}
let data: [] = [];
const options: SelectProps['options'] = [];

for (let i = 10; i < 36; i++) {
    options.push({
        value: i.toString(36) + i,
        label: i.toString(36) + i,
    });
}

const Classify = (props: Props) => {
    const [dataSource, setDataSource] = useState([])
    const [dataChange, setDataChange] = useState([])
    const [myArr,setMyArr] = useState<any[]>([])
    const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
    const [isUpdat, setIsUpdat] = useState<boolean>(false)
    const [list, setList] = useState([
        { value: 'jack', label: 'Jack' },
        { value: 'lucy', label: 'Lucy' },
        { value: 'Yiminghe', label: 'yiminghe' },
        { value: 'disabled', label: 'Disabled', disabled: true },
    ])
    const columns: ColumnsType<DataType> = [
        { title: 'ID', dataIndex: '_id', key: '_id' },
        { title: '分类名称', dataIndex: 'title', key: 'title' },
        {
            title: '分类图标', dataIndex: 'img', key: 'img', render: (img) => {
                if (img) {
                    return <img className='img' src={img}></img>
                }
            }
        },
        { title: '排序', dataIndex: 'sort', key: 'sort' },
        {
            title: '状态', dataIndex: 'state', key: 'state', render: (state) => {
                return <Space direction="vertical">
                    <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked={state} />
                </Space>

            }
        },
        {
            title: '操作', key: 'x', render: (data) => <div className='butTs'>
                <a onClick={() => updatModal(data)}>编辑</a><a className='del' onClick={() => gotoDel(data)}>删除</a>
            </div>,
        }
    ];
    const handleChange1 = async (value:string) => {
        const res = await getCategory({pid:value})
        console.log("555",res)
        setDataSource(res.data)
     };
     const onSearch = async (value: string) => {
        const res = await getCategory({title:value})
        console.log("666",res)
        setDataSource(res.data)
     };
    const showModal = (data: any) => {
        setIsModalOpen(true);
    };
    const updatModal = (data: any) => {
        // console.log("data",data);
        
        setIsUpdat(true);
        // console.log(data);
        setDataChange(data);

    }
    useEffect(() => {
        fetchData(), fetData()
    }, [])
    useEffect(()=>{
        console.log(list);
        const arr = list.map((item:any) =>{
            return {value:item._id,label:item.title}
        })
        console.log('arr',arr);
        setMyArr(arr)
    },[list])
    const fetchData = async () => {
        const res = await getAll()
        setDataSource(res.data)
        data = res.data
        console.log("123", res);
    }
    const fetData = async () => {
        const res = await getOne()
        console.log("1234", res.data);
        setList(res.data);
    }

    const modelClose = (value: boolean) => {
        setIsModalOpen(value);
    };

    const updatClose = (value: boolean) => {
        setIsUpdat(value);

    }

    return (
        <div>
            <div className='model'>
                <div className='box'>
                    <div className='up'>
                        <div className='classify'>
                            <span className='title'>商品分类：</span>
                            <Space wrap>
                                <Select
                                    defaultValue=""
                                    style={{ width: 120 }}
                                    onChange={handleChange1}
                                    options={myArr}
                                />
                            </Space>
                        </div>
                        <div className='search'>
                            <span className='name'>商品搜索：</span>
                            <Space direction="vertical">
                                <Search placeholder="请输入商品名称/关键字/ID" onSearch={onSearch} enterButton />
                            </Space>
                        </div>
                    </div>
                </div>
                <div className='button'>
                    <Button type="primary" onClick={showModal}>+ 添加商品</Button>
                </div>
            </div>
            <Table className='table'
                pagination={{ defaultPageSize: 4 }}
                columns={columns}
                expandable={{
                    expandedRowRender: (record) => <p style={{ margin: 0 }}>{record.description}</p>,
                    rowExpandable: (record) => record.name !== 'Not Expandable',
                }}
                dataSource={dataSource}
            />
            <AddClassify isModalOpen={isModalOpen} modelClose={modelClose}></AddClassify>
            <UpdaClassify dataChange={dataChange} isUpdat={isUpdat} updatClose={updatClose}></UpdaClassify>
        </div>
    )
}

export default Classify